<template>
  <el-container class="h-screen relative">
    <el-header class="h-12 shadow-md flex items-center justify-start">
      <el-icon @click.prevent="menuCollapse = !menuCollapse">
        <component v-if="menuCollapse" :is="icons['Expand']"/>
        <component v-else :is="icons['Fold']"/>
      </el-icon>
    </el-header>
    <el-container class="absolute bottom-0 aside-top">
      <el-aside width="200px" class="h-full" :class="menuCollapse ? 'aside-collapse' : 'aside-stability'"
                style="box-shadow: 1px 0 1px rgba(0, 0, 0, 0.3);">
        <el-menu class="h-full" router :collapse="menuCollapse">
          <el-menu-item index="dashboard">
            <el-icon>
              <component :is="icons['Monitor']"/>
            </el-icon>
            <template #title>Dashboard</template>
          </el-menu-item>
          <el-sub-menu v-for="(menu, index) in menuStore.menus" :index="menu.id.toString()" :key="index">
            <template #title>
              <el-icon>
                <component :is="icons[menu.icon]"/>
              </el-icon>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item v-for="(menuItem, index) in menu.children"
                          :key="index"
                          :index="menuItem.id.toString()"
                          :route="{name: menuItem.routerName}">
              <template #title>
                <el-icon>
                  <component :is="icons[menuItem.icon]"/>
                </el-icon>
                <span>{{ menuItem.name }}</span>
              </template>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-scrollbar>
          <router-view/>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {onBeforeMount, ref} from "vue";
import {useMenuStore} from "@/store/sys/menu";
import {useRouter} from "vue-router";
import icons from '@/icons'

const menuStore = useMenuStore()
const router = useRouter()

onBeforeMount(async () => {
  await menuStore.init(router)
})

const drawer = ref(true)
const menuCollapse = ref(false)
const selected = ref(['dashboard'])

const onSelected = (selectedMenus) => {
  selected.value = selectedMenus
}
</script>

<style scoped>
/*去除菜单右边线*/
.el-menu {
  border-right: 0 !important;
}

.aside-top {
  top: 61px;
}

.aside-collapse {
  animation-name: aside-collapse;
  animation-duration: 400ms;
  width: 65px;
}

.aside-stability {
  animation-name: aside-stability;
  animation-duration: 400ms;
  width: 200px;
}

@keyframes aside-collapse {
  from {
    width: 200px;
  }

  to {
    width: 65px;
  }
}

@keyframes aside-stability {
  from {
    width: 65px;
  }

  to {
    width: 200px;
  }
}

</style>
